import { createSlice } from "@reduxjs/toolkit";
import { isNotEmpty } from "@/utils/utils";
import type { RootState } from "@/store";

export interface LayoutState {
  locale: string;
  siderWidth: number;
  navTheme: 'realDark' | 'light' | undefined;
  fixedHeader: boolean;
  colorWeak: boolean;
  colorPrimary: string;
  layout: 'side' | 'top' | 'mix';
  contentWidth: 'Fluid' | 'Fixed';
  fixSiderbar: boolean;
  iconfontUrl: string;
  headerHeight: number;
  splitMenus: boolean;
  title: string;
  pwa: boolean;
  logo: string;
}

const initialState: LayoutState = {
  locale: "zh-CN",
  siderWidth: 208,
  navTheme: "light",
  colorWeak: false,
  colorPrimary: "#1890ff",
  layout: "mix",
  contentWidth: "Fluid",
  fixedHeader: true,
  fixSiderbar: true,
  iconfontUrl: "",
  headerHeight: 48,
  splitMenus: false,
  title: "Ant Design Pro",
  pwa: false,
  logo: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
};

export const layoutSlice = createSlice({
  name: "layout",
  initialState: initialState,
  reducers: {
    setLayout(state, { payload }) {
      if (isNotEmpty(payload.locale)) state.locale = payload.locale;
      if (isNotEmpty(payload.siderWidth)) state.siderWidth = payload.siderWidth;
      if (isNotEmpty(payload.navTheme)) state.navTheme = payload.navTheme;
      if (isNotEmpty(payload.fixedHeader)) state.fixedHeader = payload.fixedHeader;
      if (isNotEmpty(payload.colorWeak)) state.colorWeak = payload.colorWeak;
      if (isNotEmpty(payload.colorPrimary)) state.colorPrimary = payload.colorPrimary;
      if (isNotEmpty(payload.layout)) state.layout = payload.layout;
      if (isNotEmpty(payload.contentWidth)) state.contentWidth = payload.contentWidth;
      if (isNotEmpty(payload.fixSiderbar)) state.fixSiderbar = payload.fixSiderbar;
      if (isNotEmpty(payload.iconfontUrl)) state.iconfontUrl = payload.iconfontUrl;
      if (isNotEmpty(payload.headerHeight)) state.headerHeight = payload.headerHeight;
      if (isNotEmpty(payload.splitMenus)) state.splitMenus = payload.splitMenus;
      if (isNotEmpty(payload.title)) state.title = payload.title;
      if (isNotEmpty(payload.pwa)) state.pwa = payload.pwa;
      if (isNotEmpty(payload.logo)) state.logo = payload.logo;
    },
    setLocale(state, { payload }) {
      state.locale = payload.locale;
    },
  },
});

export const selectLayout = (state: RootState) => state.layout;
export const selectLocale = (state: RootState) => state.layout.locale;
export const { setLayout, setLocale } = layoutSlice.actions;
export default layoutSlice.reducer;
